<script>
import { defineComponent, getCurrentInstance } from 'vue'
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { cutStrByFullLength, getStrFullLength } from '../_util/util'
import Tooltip from 'ant-design-vue/es/tooltip'

export const EllipsisProps = {
  prefixCls: PropTypes.string.def('ant-pro-ellipsis'),
  tooltip: PropTypes.bool,
  length: PropTypes.number.isRequired
}

export default defineComponent({
  name: 'Ellipsis',
  components: {
    Tooltip
  },
  props: EllipsisProps,
  setup (props, context) {

    const { length } = props

    function getStrDom (str, fullLength) {
      return (
        <span>{ cutStrByFullLength(str, length) + (fullLength > length ? '...' : '') }</span>
      )
    }

    function getTooltip (fullStr, fullLength) {
      return (
        <Tooltip>
          <template slot="title">{ fullStr }</template>
          { getStrDom(fullStr, fullLength) }
        </Tooltip>
      )
    }

    return {
      getTooltip,
      getStrDom
    }
  },
  render () {
    const { getTooltip, getStrDom } = this
    const { tooltip, length } = this.$props

    const { ctx } = getCurrentInstance()
    
    const str = 'There were injuries alleged in three cases in 2015'
    // ctx.$slots.default.map(vNode => vNode.text).join('')
    const fullLength = getStrFullLength(str)

    const strDom = tooltip && fullLength > length ? getTooltip(str, fullLength) : getStrDom(str, fullLength)

    return (
      strDom
    )
  }
})
</script>